<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滚动监听</title>
<meta name="description" content="滚动监听" />
<meta name="keywords" content="滚动监听, CIScrollSpy, javascript" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
<link rel="stylesheet" type="text/css" href="../css/animate.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>

<body>
<!-- <strong class="logo">iburning<small>.com</small></strong> -->
<div class="ci-scroll" id="my-scroll">
    <div class="section">
        <h1 class="animated bounceIn" style="text-align:center;">SCROLLSPY</h1>
        <p><strong>移动设备滚动监听</strong></p>
    </div>
    <div class="section">
        <h2>Set spy line</h2>
        <p id="text-1" style="display:none;">设置屏幕上某一高度为监测线</p>
    </div>
    <div class="section">
        <h2>Enter event</h2>
        <p id="text-2" style="display:none;">当预设点滚动到监测线时则触发enter事件</p>
    </div>
    <div class="section">
        <h2>Leave event</h2>
        <p id="text-3" style="display:none;">当预设点低于监测线时则触发leave事件</p>
    </div>
    <div class="section">
        <h2>Animate.css</h2>
        <p id="text-4" style="display:none;">配合animate.css使用，获取丰富视觉效果</p>
    </div>
</div>

<div class="ci-scroll-background" id="my-scroll-background">
    <div class="image"></div>
</div>

<div id="spy-line"></div>
<div id="ci-log">log</div>

<script src="js/scrollSpy.js"></script>
<script src="js/main.js"></script>

</body>
</html>